<template>
    <div class="infoshow">
        <el-row class="row-bg">
            <el-col :span="8">
                <div class="user">
                    <img :src="users.avator" alt="">
                </div>
            </el-col>
            <el-col :span="16">
                <div class="userinfo">
                    <div class="user-item">
                        <div class="item1">
                            <i class="fa fa-user"></i>
                            <span>{{users.name}}</span>
                        </div>
                        <div class="item2">
                            <i class="fa fa-cog"></i>
                            <span>{{users.user == 'boss' ? '老板' : '员工'}}</span>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
  name: "infoShow",
  data () {
    return {
    };
  },
  computed:{
      users(){
        return this.$store.getters.user
      }
  }
}
</script>
<style scoped>
    .infoshow{
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }
    .row-bg{
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    .user{
        text-align: center;
        position: relative;
        top: 30%;
        right: -20%;
    }
    .user img{
        width: 150px;
        border-radius: 150px;
    }
    .userinfo{
        background-color: #eee;
        height: 100%;
    }
    .user-item{
        position: relative;
        top: 32%;
        display: flex;
        flex-direction: column;
        padding: 26px;
    }
    .user-item .item1{
        margin-bottom: 20px;
    }
    .user-item span{
        text-align: center;
        font-size: 28px;
    }
</style>